<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 200px;background: #ccc;display: none;}
    </style>
</head>
<body>
    <input type="button" value="点我" id="btn">
    <div id="box">
        <ul>
            <li>link1</li>
            <li>link2</li>
            <li>link3</li>
            <li>link4</li>
        </ul>
    </div>
</body>
<script>

    var obtn = document.getElementById("btn")
    var obox = document.getElementById("box")

    obtn.onclick = function(eve){
        var e = eve || window.event;
        obox.style.display = "block";

        // console.log(e)
        // 取消事件冒泡
        // IE：e.cancelBubble = true;
        // 正常：e.stopPropagation();

        stopBubble(e);
    }

    document.onclick = function(){
        obox.style.display = "none";
    }
    

    // 处理事件冒泡的兼容封装
    function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }

</script>
</html>